<template>
  <view class="messages-page">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <view class="header-inner">
        <view class="back-btn" @click="handleBack">
          <u-icon name="arrow-left" color="#1f2937" size="18"></u-icon>
        </view>
        <text class="header-title">消息中心</text>
        <text class="mark-all-btn" @click="handleMarkAllRead">全部已读</text>
      </view>
    </view>

    <scroll-view scroll-y class="content-scroll">
      <!-- 消息列表 -->
      <view class="message-list">
        <view 
          v-for="message in messages" 
          :key="message.id"
          class="message-item"
          @click="handleMessageClick(message)"
        >
          <view class="message-card">
            <view class="card-content">
              <view :class="['message-icon', getIconClass(message.type)]">
                <u-icon :name="getIconName(message.type)" :color="getIconColor(message.type)" size="18"></u-icon>
              </view>
              <view class="message-info">
                <view class="info-header">
                  <text class="message-title">{{ message.title }}</text>
                  <text class="message-time">{{ message.time }}</text>
                </view>
                <text class="message-content">{{ message.content }}</text>
              </view>
              <view v-if="!message.read" class="unread-dot"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="messages.length === 0" class="empty-state">
        <text class="empty-icon">📭</text>
        <text class="empty-text">暂无消息</text>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 消息数据
const messages = ref([
  {
    id: 1,
    type: 'comment',
    title: '服务咨询',
    content: '您好，我对您发布的服务感兴趣...',
    time: '10分钟前',
    read: false
  },
  {
    id: 2,
    type: 'system',
    title: '系统通知',
    content: '您的服务已审核通过',
    time: '1小时前',
    read: false
  },
  {
    id: 3,
    type: 'order',
    title: '订单消息',
    content: '您有一个新的服务订单',
    time: '3小时前',
    read: true
  },
  {
    id: 4,
    type: 'comment',
    title: '需求回复',
    content: '有人回复了您的需求信息',
    time: '昨天 10:30',
    read: true
  }
])

// 获取图标名称
const getIconName = (type) => {
  const iconMap = {
    comment: 'chat',
    system: 'info-circle',
    order: 'bag'
  }
  return iconMap[type] || 'bell'
}

// 获取图标颜色
const getIconColor = (type) => {
  const colorMap = {
    comment: '#10b981',
    system: '#3b82f6',
    order: '#f59e0b'
  }
  return colorMap[type] || '#10b981'
}

// 获取图标类名
const getIconClass = (type) => {
  const classMap = {
    comment: 'icon-primary',
    system: 'icon-secondary',
    order: 'icon-accent'
  }
  return classMap[type] || 'icon-primary'
}

// 事件处理
const handleBack = () => {
  uni.navigateBack()
}

const handleMarkAllRead = () => {
  messages.value.forEach(msg => msg.read = true)
  uni.showToast({
    title: '已全部标记为已读',
    icon: 'success'
  })
}

const handleMessageClick = (message) => {
  message.read = true
  uni.navigateTo({ 
    url: `/pages/yjyny/messages/detail?id=${message.id}` 
  })
}
</script>

<style lang="scss" scoped>
.messages-page {
  min-height: 100vh;
  background-color: #f9fafb;
}

// 顶部导航栏
.page-header {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  gap: 24rpx;
}

.back-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.back-btn:active {
  background-color: #f3f4f6;
}

.header-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
  text-align: center;
}

.mark-all-btn {
  font-size: 24rpx;
  color: #10b981;
  padding: 8rpx 16rpx;
}

// 内容滚动区
.content-scroll {
  height: calc(100vh - 120rpx);
}

// 消息列表
.message-list {
  padding: 24rpx 32rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.message-item {
  width: 100%;
}

.message-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
  padding: 32rpx;
  transition: all 0.3s;
}

.message-card:active {
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.card-content {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  position: relative;
}

.message-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  &.icon-primary {
    background-color: rgba(16, 185, 129, 0.1);
  }
  
  &.icon-secondary {
    background-color: rgba(59, 130, 246, 0.1);
  }
  
  &.icon-accent {
    background-color: rgba(245, 158, 11, 0.1);
  }
}

.message-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.message-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #1f2937;
}

.message-time {
  font-size: 22rpx;
  color: #6b7280;
  flex-shrink: 0;
}

.message-content {
  font-size: 24rpx;
  color: #6b7280;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unread-dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #ef4444;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 160rpx 48rpx;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #6b7280;
}

// 底部安全区
.safe-bottom {
  height: 160rpx;
}
</style>
